在 什麼是 JSX （Day2） 的時候有寫過，JSX 會經過 Bable 轉譯成 React.createElement 語法，可以說其實每個 JSX 元素都只是呼叫 React.createElement 的語法糖。

ReactDOM.render(
  React.createElement("h1", null, "Hello Bable"),
  document.getElementById('root')
);

不使用 JSX 也不想一直重複寫 React.createElement

1. 使用變數 const h = React.createElement;
2. 使用社群專案 react-hyperscript 或 hyperscript-helpers 等

Hyperscript 指的是使用 JavaScript 來創建 Hypertext（超文本），一個比較經典 Hyperscript 實現是hyperhype/hyperscript。與 ejs，JSX，jade 等模板語言（template language）不同，Hyperscript 通過函數來創建 DOM 元素。

使用變數縮寫:

const h = React.createElement;

ReactDOM.render(
  h('div', null, 'Hello World'),
  document.getElementById('root')
);

不同 “hyperscript” 寫法比較:

// JSX
<ul id="bestest-menu">
  {items.map( item =>
    <li id={"item-"+item.id} {...attrs(item.id)}>{item.title}</li>
  )}
</ul>

// plain hyperscript
h('ul#bestest-menu', items.map( item =>
  h('li#item-'+item.id, attrs(item.id), item.title))
);

// hyperscript-helpers
ul('#bestest-menu', items.map( item =>
  li('#item-'+item.id, attrs(item.id), item.title))
);
//來源：https://github.com/ohanhi/hyperscript-helpers

以上今天

參考資料：
https://zh-hant.reactjs.org/docs/react-without-jsx.html
https://github.com/ohanhi/hyperscript-helpers
https://yoyoyohamapi.gitbooks.io/cycle-js-21/content/9.html